<template>
    <a-collapse :bordered="false">
        <template #expandIcon="props">
            <CaretRightOutlined :rotate="props.isActive ? 90 : 0"/>
        </template>
        <a-collapse-panel key="1" :header="i18n('legendComponent','图例组件')">
            <template #extra>
                <span @click.stop="">
                        <a-switch size="small" v-model:checked="config.styles.legendShow"/>
                </span>
            </template>
            <div v-if="config.styles.legendShow">
                    <a-row :gutter="24" style="margin: 0px">
                        <a-col :span="12">
                            <a-form-item :label="i18n('legendType','图例类型')">
                                <a-select v-model:value="config.styles.legendConfig.type">
                                    <a-select-option value="plain">{{ i18n('generalLegend', '普通图例') }}</a-select-option>
                                    <a-select-option value="scroll">{{ i18n('scrollLegend', '滚动图例') }}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :label="i18n('icon','图标')">
                                <a-select v-model:value="config.styles.legendConfig.icon">
                                    <a-select-option value="circle">Circle</a-select-option>
                                    <a-select-option value="rect">Rect</a-select-option>
                                    <a-select-option value="roundRect">RoundRect</a-select-option>
                                    <a-select-option value="triangle">Triangle</a-select-option>
                                    <a-select-option value="diamond">Diamond</a-select-option>
                                    <a-select-option value="pin">Pin</a-select-option>
                                    <a-select-option value="arrow">Arrow</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24" style="margin: 0px">
                        <a-col :span="12">
                            <a-form-item :label="i18n('orient','排列方向')">
                                <a-select @change="searchArrange" v-model:value="config.styles.legendConfig.orient">
                                    <a-select-option value="horizontal">{{ i18n('horizontal', '水平') }}</a-select-option>
                                    <a-select-option value="vertical">{{ i18n('vertical', '垂直') }}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :label="i18n('position','图例位置')">
                                <a-select v-if="config.styles.legendConfig.orient =='horizontal'"
                                          v-model:value="config.styles.legendConfig.position">
                                    <a-select-option value="top">{{ i18n('top', '顶部') }}</a-select-option>
                                    <a-select-option value="bottom">{{ i18n('bottom', '底部') }}</a-select-option>
                                </a-select>
                                <a-select v-else v-model:value="config.styles.legendConfig.position">
                                    <a-select-option value="left">{{ i18n('left', '左侧') }}</a-select-option>
                                    <a-select-option value="right">{{ i18n('right', '右侧') }}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24" style="margin: 0px">
                        <a-col :span="12">
                            <a-form-item :label="i18n('textAlign','图例对齐方式')">
                                <a-select v-if="config.styles.legendConfig.orient =='horizontal'"
                                          v-model:value="config.styles.legendConfig.textAlign">
                                    <a-select-option value="left">{{ i18n('left', '左') }}</a-select-option>
                                    <a-select-option value="center">{{ i18n('center', '中') }}</a-select-option>
                                    <a-select-option value="right">{{ i18n('right', '右') }}</a-select-option>
                                </a-select>
                                <a-select v-else v-model:value="config.styles.legendConfig.textAlign">
                                    <a-select-option value="top">{{ i18n('on', '上') }}</a-select-option>
                                    <a-select-option value="center">{{ i18n('center', '中') }}</a-select-option>
                                    <a-select-option value="bottom">{{ i18n('under', '下') }}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :label="$ti18('fontColor','字体颜色','chartLang.common','')">
                                <a-input v-model:value="config.styles.legendConfig.color" type="color"
                                         :placeholder="$ti18('fontColor','字体颜色','chartLang.common','')"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24" style="margin: 0px">
                        <a-col :span="12">
                            <a-form-item :label="i18n('legendMetric','图例拼接度量')">
                                <a-switch size="small" default-checked v-model:checked="config.styles.joinMeasure" />
                            </a-form-item>
                        </a-col>
                    </a-row>
            </div>
        </a-collapse-panel>
    </a-collapse>
</template>

<script>
/**
 * 图例组件配置
 */
export default {
    name: "legend-config",
    inject: {
        config: {
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            //图例组件默认配置
            defConfig: {
                type: "plain",
                icon: "roundRect",
                orient: "horizontal",
                position: "top",
                textAlign: 'left',
                color: '#ffffff',
            },
            labelCol: { span: 6 },
            wrapperCol: { span: 16 },
        }
    },
    created() {
        //图例组件
        if (!this.config.styles.legendConfig) {
            this.config.styles["legendShow"] = true;
            this.config.styles["legendConfig"] = this.defConfig;
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "chartLang.legendConfig", key);
        },
        searchArrange() {
            if (this.config.styles.legendConfig.orient == 'horizontal') {
                this.config.styles.legendConfig.position = 'top';
                this.config.styles.legendConfig.textAlign = 'left'
            } else {
                this.config.styles.legendConfig.position = 'left'
                this.config.styles.legendConfig.textAlign = 'top'
            }
        }
    },
    watch: {}
}
</script>

<style scoped>
</style>
